import React, {Component} from "react";
import axios from "axios";
import "../Page"
import Page from "../Page";
import List from "../List";
import {NavLink} from "react-router-dom";

export default class Manage extends Component {
    state = {
        title_item: ["店铺编号", "店铺名称", "店铺简介", "店铺类型","操作"],
        proxy: "http://localhost:3000",
        pages: {
            page: 1,
            pageSize: 10,
            pageMax: 0,
            prePage: 0,
            nextPage: 0,
            isFirstPage: true,
            isLastPage: false,

        },
        navigatePage: [1,2,3,4,5],
        shop: []
    }

    componentDidMount() {
        const {pages} = this.state
        axios.request({
            method: "post",
            url: this.state.proxy + "/shop",
            params: {
                page: pages.page,
                pageSize: pages.pageSize
            }
        }).then(response => {
            const {data} = response
            if(data.navigatepageNums.length < this.state.navigatePage.length ){
                data.navigatepageNums = this.state.navigatePage
            }

            console.log("data=", data)
            this.setState({
                shop: data.list,
                navigatePage: data.navigatepageNums,
                pages: {
                    ...this.state.pages,
                    page: data.pageNum,
                    prePage: data.prePage,
                    nextPage: data.nextPage,
                    isFirstPage: data.isFirstPage,
                    isLastPage: data.isLastPage
                }
            })
            console.log("shopList中的State=", this.state)
        })
    }

    componentWillUnmount = () => {
        this.setState = () => {
            return;
        };
    }

    //切换页数的回调函数
    changePage = (pageObj) => {
        // console.log("pageObj = ", pageObj)
        // console.log("上一次state = ", this.state)
        const oldPages = this.state.pages

        //上一页
        if (pageObj === -1) {
            // console.log("进入了pageObj === -1 的判断")
            // this.setState({pages:{...oldPages,page: this.state.pages.prePage}})
            this.pageRequest(this.state.pages.prePage)

            // console.log("修改后的pages ", this.state.pages)

            //下一页
        } else if (pageObj === -3) {
            // console.log("进入了pageObj === -3 的判断")

            // this.setState({pages: {...oldPages,page: this.state.pages.nextPage }})
            this.pageRequest(this.state.pages.nextPage)

            // console.log("修改后的pages ", this.state.pages)

        } else {
            // console.log("进入了pageObj else 的判断")

            // this.setState({pages: {...oldPages,page: pageObj}})
            this.pageRequest(pageObj)

            // console.log("修改后的pages ", this.state.pages)


        }
        // console.log("pageObj = ", pageObj)
        // // console.log("navigatePage",this.state.navigatePage)
    }
    //切换页面的ajax请求函数
    pageRequest = (pageObj) => {
        axios.request({
            method: "post",
            url: this.state.proxy + "/shop",
            params: {
                page: pageObj,
                pageSize: this.state.pages.pageSize
            }
        }).then(response => {
            const {data} = response
            if(data.navigatepageNums.length < this.state.navigatePage.length ){
                data.navigatepageNums = this.state.navigatePage
            }
            this.setState({
                shop: response.data.list,
                navigatePage: data.navigatepageNums,
                pages: {
                    ...this.state.pages,
                    page: data.pageNum,
                    prePage: data.prePage,
                    nextPage: data.nextPage,
                    isFirstPage: data.isFirstPage,
                    isLastPage: data.isLastPage
                }
            })
        })
    }


    render() {
        return (
            <div className="main_content">
                <span className="title">
                店铺管理
                </span>

                <div className="parent_div footer">
                    <form>
                        产品名称&nbsp;&nbsp;<input type="text" className="footer_input"/>&nbsp;&nbsp;
                        <button type="button" className="footer_btn_red" onClick={this.inquire}>查询</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" className="footer_btn_white">重置</button>
                    </form>

                    <div className="footer_tag">
                        <span>产品状态</span>
                        &nbsp;&nbsp;&nbsp;
                        <span>
                                <input type="checkbox" id="state1" className="tag_input"/>
                                <label htmlFor="state1" className="tag_label">男</label>
                        </span>
                        <span>
                                <input type="checkbox" id="state2" className="tag_input"/>
                                <label htmlFor="state2" className="tag_label">女</label>
                        </span>
                    </div>
                    <button className="add_btn">添加一件产品</button>
                    &nbsp;&nbsp;&nbsp;
                    <button className="refresh_btn">刷新店铺列表</button>
                    <div className="total">
                        <span className="glyphicon glyphicon-search total_icon"></span>
                        &nbsp;&nbsp;<span>店铺总数 26 位</span>
                    </div>
                    {/*
                        List组键
                    */}

                    {/*<List  title_item = {this.state.title_item} pages = {this.state.pages} navigatePage={this.state.navigatePage}/>*/}

                    <div className="List_box">
                        <div className="List_title">
                            {
                                this.state.title_item.map(
                                    (titleObj, index) => {
                                        return <span className="List_title_item" key={index}>{titleObj}</span>
                                    }
                                )
                            }
                        </div>

                        {
                            this.state.shop.map((shopObj) => {
                                // const shopId = shopObj.shopId
                                return (
                                    <div className="List_data" key={shopObj.shopId}>
                                        <span className="List_data_item">{shopObj.shopId}</span>
                                        <span className="List_data_item">{shopObj.shopName}</span>
                                        <span className="List_data_item">{shopObj.shopTitle}</span>
                                        <span className="List_data_item">{shopObj.sortName}</span>
                                        <span className="List_data_item">
                                            <NavLink to={{pathname:"/modify_shop",state:{shopId:shopObj.shopId}}} activeClassName="highlight" id="navlink">
                                                <button className="List_button">详情</button>
                                            </NavLink>
                                        </span>

                                    </div>
                                )
                            })
                        }

                        <div className="pages_parent">
                            <nav aria-label="Page navigation ">
                                <ul className="pagination pagination-lg">
                                    <li>
                                        <a href="#" aria-label="Previous" onClick={() => {
                                            this.changePage(-1)
                                        }} style={{pointerEvents: this.state.pages.isFirstPage ? "none" : "auto"}}>
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li><a href="#" onClick={() => {
                                        this.changePage(this.state.navigatePage[0])
                                    }}
                                           style={{pointerEvents: this.state.pages.isFirstPage ? "none" : "auto"}}>    {this.state.navigatePage[0]}</a>
                                    </li>
                                    <li><a href="#" onClick={() => {
                                        this.changePage(this.state.navigatePage[1])
                                    }}>    {this.state.navigatePage[1]}</a></li>
                                    <li><a href="#" onClick={() => {
                                        this.changePage(this.state.navigatePage[2])
                                    }}>    {this.state.navigatePage[2]}</a></li>
                                    <li><a href="#" onClick={() => {
                                        this.changePage(this.state.navigatePage[3])
                                    }}>    {this.state.navigatePage[3]}</a></li>
                                    <li><a href="#" onClick={() => {
                                        this.changePage(this.state.navigatePage[4])
                                    }}
                                           style={{pointerEvents: this.state.pages.isLastPage ? "none" : "auto"}}>    {this.state.navigatePage[4]}</a>
                                    </li>
                                    <li>
                                        <a href="#" aria-label="Next" onClick={() => {
                                            this.changePage(-3)
                                        }} style={{pointerEvents: this.state.pages.isLastPage ? "none" : "auto"}}>
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    {/*    显示信息列表的结束标签*/}


                </div>
            </div>
        )
    }
}
